<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>09_form</title>
</head>
<body>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    /*
    1. 问题: 在react应用中, 如何收集表单输入数据
    2. 包含表单的组件分类
      受控组件
      非受控组件
    */
    /*
    需求: 自定义包含表单的组件
      1. 界面如下所示
      2. 输入用户名密码后, 点击登陆提示输入信息
      3. 不提交表单
    */
    class MyForm extends React.Component {
        constructor(props) {
            super(props);

            // 初始化
            this.state = {
                password: ''
            }

            this.handleSubmit = this.handleSubmit.bind(this);
            this.handlerChange = this.handlerChange.bind(this);
        }

        handleSubmit(event) {

            const {password} = this.state;
            const uname = this.unameInput.value;
            alert(uname + "---" + password);
            // 阻止默认行为
            event.preventDefault();
        }

        handlerChange(event) {
            const password = event.target.value;
            this.setState({password});
        }

        render() {
            return (
                <form action="" onSubmit={this.handleSubmit}>
                    <input type="text" ref={input => this.unameInput = input}/>&nbsp;&nbsp;
                    <input type="text" value={this.state.password} onChange={this.handlerChange}/>&nbsp;&nbsp;
                    <input type="submit" value="登录"/>

                </form>
            )
        }


    }

    ReactDOM.render(<MyForm/>, document.getElementById("example"));
</script>